//留言板页面
//样式
import style from './style.module.less'
import cls from 'classnames'
//组件
import BaseComment from "coms/baseComment"
import BaseCard from "coms/baseCard";//推荐阅读组件
//store
// import { useStore } from "@/store/Provider"
//api
import { recommebdList, getCommentList } from '@/api/article';
//utils工具
import { useNavigate } from 'react-router-dom';

const Board = () => {
    // const { commentModule } = useStore();
    const navigate = useNavigate();
    // 点击 推荐阅读 跳详情
    const toDetaiil = (id) => {
        navigate(`/article/${id}`)
    }

    return (
        <div className={cls("content_wrappper", style.content_wrappper)}>
            <div className={cls("message_box", style.message_box)}>
                <h1>留言板</h1>
                <p>请勿灌水 🤖</p>
                <p>垃圾评论过多，欢迎提供好的过滤（标记）算法</p>
            </div>
            {/* 评论组件 */}
            <BaseComment
                pageInfo={{ // 启用分页
                    page: 1,
                    pageSize: 3,
                    size: 'small'
                }}
                request={async ({ pageConfig }) => {  // 发送请求 组件创建 分页改变
                    const { data } = await getCommentList("4ce5dc19-5cb3-4be0-901b-f1ac867a9547", pageConfig);
                    return {
                        data: data.data[0], // 评论数据
                        total: data.data[1]  // 评论总条数
                    }
                }}
            />
            {/* 推荐阅读组件 */}
            <BaseCard title="推荐阅读"
                className={cls([style.BaseCard])}
                request={async () => {
                    const { data: { data } } = await recommebdList();
                    return {
                        data
                    }
                }}
            >
                {
                    (item, index) => {
                        return <p key={index} onClick={() => toDetaiil(item.id)}>{item.title}</p>
                    }
                }
            </BaseCard>
        </div>

    )

}




export default Board;